<template>
  <view class="shop">
    <view class="slid">
      <scroll-view scroll-x :show-scrollbar="false" class="category-scroll">
        <view
          class="category-item"
          :class="{ active: activeIndex === index }"
          v-for="(category, index) in categories"
          :key="index"
          @click="selectCategory(index)"
          >{{ category.name }}
          <view class="indicator" v-if="activeIndex === index"></view>
        </view>
      </scroll-view>
    </view>
    <view class="slid-list" >
    <view class="slid-item" v-for="item in 4">
      <image src="../../static/logo.png" mode="scaleToFill" />
      <text class="title">洽洽纯坚果礼盒1250g 9袋年货休闲零食礼包送礼...</text>
      <view class="labels-container">
        <view class="label" v-for="item in 3">
          <text>到店自提</text>
        </view>
      </view>
      <view class="price" >
        <view class="currentIcons"></view>
        <view class="currentPrice">189.00</view>
         <view class="originIcons"></view>
        <view class="originPrice">206.00</view>
      </view>
    </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
const activeIndex = ref(0);
const selectCategory = (index) => {
  activeIndex.value = index;
};
const categories = reactive([
  { name: "热门推荐" },
  { name: "休闲零食" },
  { name: "粮油副食" },
  { name: "厨房用品" },
  { name: "生活服务" },
  { name: "厨房用品" },
  { name: "生活服务" },
  { name: "厨房用品" },
  { name: "生活服务" },
  { name: "厨房用品" },
  { name: "生活服务" },
]);
</script>

<style lang="scss" scoped>
.shop {
  padding-left: 32rpx;
  .slid {
    height: 96rpx;
    background: #ffffff;
    .category-scroll {
      white-space: nowrap; // 关键：禁止换行
      .category-item {
        display: inline-block;
        width: 120rpx;
        height: 30rpx;
        font-family: "Source Han Sans CN, Source Han Sans CN";
        font-weight: 400;
        font-size: 30rpx;
        color: #666666;
        line-height: 30rpx;
        text-align: left;
        padding: 32rpx 0;
        margin-right: 48rpx;
        & .active {
          color: #0071c6;
        }
      }
      .indicator {
        width: 74rpx;
        height: 4rpx;
        background: #0071c6;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-top: 12rpx;
        padding: 0 16rpx;
      }
    }
  }
  .slid-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);

   gap:16rpx;
  .slid-item {
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
    margin-top: 22rpx;
    font-family: " Source Han Sans CN, Source Han Sans CN";
    display: flex;
    flex-direction: column;
    justify-content: center;
   margin-bottom: 18rpx;
    image {
      width: 300rpx;
      height: 300rpx;
      background: rgba(217, 217, 217, 0);
      border-radius: 8rpx;
      margin: 0 22rpx;
      margin-top: 6rpx;
    }
    .title {
      width: 312rpx;
      height: 80rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: justified;
      margin: 0 16rpx;
      margin-top: 16rpx;
    }
    .labels-container {
      display: flex;

      margin-left: 16rpx;
      .label {
        margin-top: 12rpx;
        text {
          width: 96rpx;
          height: 32rpx;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          border: 2rpx solid #eb7e00;
          color: #eb7e00;
          font-size: 18rpx;
          padding: 8rpx 8rpx 10rpx 10rpx;
          margin-right: 8rpx;
        }
      }
    }
    .price {
        margin-top: 24rpx;
      display: flex;
      align-items: center;

      .currentIcons{
        margin-left: 18rpx;
        width: 20rpx;
        height: 22rpx;
        background: #ffcc00;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
      }
      .currentPrice{
height: 34rpx;
font-weight: 500;
font-size: 34rpx;
color: #F62A20;
text-align: justified;
margin-left: 4rpx;
line-height: 34rpx;
      }
.originIcons{
width: 13rpx;
height: 15rpx;
background: #D9D9D9;
margin-left: 10rpx;
line-height: 15rpx;
}
.originPrice{
height: 24rpx;
font-weight: 500;
font-size: 24rpx;
color: #C2C2C0;
text-align: left;
text-decoration-line: line-through;
margin-left: 4rpx;
line-height: 24rpx;
}
    }
  }
}
}
</style>
